<template>
  <!-- <div class="dialog-overlay" @click.self="clickOutSide()"> -->
  <div class="dialog-overlay" style="flex-direction: column;">
    <MyLoadingView ref="loadingView" />
    <div class="msg" v-show="!isEmpty(message)">{{ message }}</div>
  </div>
</template>
<script setup lang="ts" name="LoadingDialog">
import { isEmpty } from '@/utils/httputils';
import MyLoadingView from '../MyLoadingView.vue';
import { onMounted, onUnmounted, ref } from 'vue';
import emitter from '@/main';
import { EmitterChannel } from '@/utils/constant';

// import { isEmpty } from '@/utils/httputils'
//参数接收:fix(true时点击外部不关闭)const props =
const props = defineProps(['msg', 'fix'])
const message = ref(props.msg)
const loadingView = ref<InstanceType<typeof MyLoadingView> | null>(null)
//声明回调事件，执行回调事件:emit('onClick')
// const emit = defineEmits(['onClickCallBack'])
// const emit = defineEmits<{ (e: 'clickCallback', type: number): void }>()
// function onClickAction(type: number) {
// 触发自定义事件通知父组件，在.ts传入clickCallback要改成onClickCallback
//   emit('clickCallback', type)
// }
//外部通过，emitter.emit('loading-msg','你好')来更新
emitter.on(EmitterChannel.Loading, (str) => {
  if (str) {
    message.value = str
  }
})
onMounted(() => {
  // log('挂载，开始动画')
  loadingView.value?.start()
})
onUnmounted(() => {
  loadingView.value?.stop()
  emitter.off(EmitterChannel.Loading)
})
</script>
<style lang="css" scoped>
/* 对话框主体 */
.dialog-base {
  padding: 20px;
  width: 100px;
  width: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.msg {
  width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: white;
}
</style>
